<template>
  <section class="update-self-info" id="studentUpdate">
    <div class="detailPage">
      <div class="studentImg">
        <el-upload
          accept="image/png, image/jpeg"
          class="avatar-uploader"
          :action="`${isDev ? '/root' : ''}/fastdfs-util/api/fastdfs/upload/image/sample`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img :src="studentHeader" class="avatar">
          <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
        </el-upload>
        <p style="font-size:12px;font-weight:300;">点击图片，上传照片，请上传(png、jpeg)小于5M的照片</p>
      </div>
      <el-form :model="basicInfoForm" status-icon ref="basicInfoForm" :rules="basicInfoFormRules" class="demo-ruleForm" label-position="top">
        <el-row :gutter="150">
          <el-col :span="24">
            <h2 class="titleH">基本信息</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学号" >
              <el-input size="small" disabled type="text" v-model="basicInfoForm.sn" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名" >
              <el-input size="small" disabled  type="text" v-model="basicInfoForm.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-input size="small"  disabled type="text" v-model="basicInfoForm.gender.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学院">
              <el-input size="small" disabled type="text" v-model="basicInfoForm.colleges.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年级">
              <el-input size="small"  disabled type="text" v-model="basicInfoForm.grade" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业" >
              <el-input size="small" disabled type="text" v-model="basicInfoForm.majors.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="班级">
              <el-input size="small" disabled type="text" v-model="basicInfoForm.classes.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族">
               <!-- <el-select size='small'  v-model="basicInfoForm.nationName" placeholder="民族" >
                <el-option v-for="item in nationals" :key="item" :label="item" :value="item">
                </el-option>
              </el-select> -->
               <el-select disabled size='small' v-model="basicInfoForm.nationId" placeholder="民族" value-key='id'>
                <el-option v-for="item in nationOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="籍贯" >
               <el-select size='small' disabled v-model="basicInfoForm.nativePlaceId" placeholder="籍贯" value-key="name">
                <el-option v-for="item in nativePlaceOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="政治面貌">
              <el-select disabled size='small' v-model="basicInfoForm.politicalStatus" placeholder="政治面貌" value-key='id'>
                <el-option v-for="item in politicsStatusOptions" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="户口类型" >
              <el-select disabled size='small' v-model="basicInfoForm.nodeType" placeholder="户口类型" value-key="id">
                <el-option v-for="item in nodetypeOptions" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证件类型">
              <!-- <el-input size="small"  type="text" v-model="basicInfoForm.idType.name" autocomplete="off"></el-input> -->
               <el-select disabled @change="idTypeChange" size='small' v-model="basicInfoForm.idType" placeholder="身份证件类型" value-key="id">
                <el-option v-for="item in idTypeOptions" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  label="证件号" >
              <el-input disabled @change="idNumChange" :maxlength=20  size="small"  type="text" v-model="basicInfoForm.idNumber" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生状态" >
              <el-select disabled size='small' v-model="basicInfoForm.status" placeholder="学生状态" value-key="id">
                <el-option v-for="item in studentStatusOptions" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
              <!-- <el-input size="small"  type="text" v-model="basicInfoForm.status.name" autocomplete="off"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学制" >
              <el-input size="small" disabled type="text" v-model="basicInfoForm.studentLength" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生源地" >
              <el-select disabled size='small' v-model="basicInfoForm.sourcePlace" placeholder="生源地" value-key="name">
                <el-option v-for="item in nativePlaceOptions" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  label="银行账户" prop="bankCard">
              <el-input :maxlength=19 size="small" type="number" v-model="basicInfoForm.bankCard" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学生在校职务" prop="position">
              <el-input size="small" maxlength="30" type="text" v-model="basicInfoForm.position" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校区" prop="campus">
              <!-- <el-input size="small"  type="text" v-model="basicInfoForm.campus.name" autocomplete="off"></el-input> -->
              <el-select  size='small' v-model="basicInfoForm.campus" placeholder="校区" value-key="id">
                <el-option v-for="item in campusNameOptions" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宿舍" prop="dorm">
              <el-input  maxlength="50" size="small"  type="text" v-model="basicInfoForm.dorm" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="phone">
              <el-input maxlength="11" size="small" type="text" v-model="basicInfoForm.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱" prop="email">
              <el-input maxlength="30" size="small" type="text" v-model="basicInfoForm.email" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="qq" prop="qq">
              <el-input size="small" type="number" maxlength="20" v-model="basicInfoForm.qq" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker :picker-options="pickerOptions" disabled style="width:100%"  size="small"  v-model="basicInfoForm.birthDate" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="个人健康状况" prop="healthStatus">
              <!-- <el-input size="small" type="text" v-model="basicInfoForm.healthStatus" autocomplete="off"></el-input> -->
              <el-select size='small' v-model="basicInfoForm.healthStatus" placeholder="个人健康状况" >
                <el-option  label="健康" value="健康"></el-option>
                <el-option  label="特异体质" value="特异体质"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="titleH">入学信息</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入学时间" prop="checkPass">
              <el-date-picker
                size="small"
                disabled
                style="width:100%"
                v-model="basicInfoForm.enterDate"
                type="date"
                placeholder="选择入学时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入学前户口所在地" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.registeredResidence"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入学前就读中学" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.highSchool"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮政编码" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.postalCode"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮寄录取通知书家庭地址" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.noticeHomeAddress"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮寄录取通知书收件人姓名" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.noticeAddresseeName "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮寄录取通知书收件人电话" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.noticeAddresseePhone "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高考考生号" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.examNumber"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高考成绩" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.highSchoolScore"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排位" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.rank"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考生科类名称" prop="checkPass">
            <el-select disabled style="width:100%" placeholder="" v-model="basicInfoForm.objectType" size="small">
              <el-option label="理科" :value="1"></el-option>
              <el-option label="文科" :value="2"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="sub-title">高考志愿</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿1" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerOne "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿2" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerTwo "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿3" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerThree "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿4" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerFour "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿5" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerFive "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专业志愿6" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.volunteerSix "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投档志愿" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.deliveryVolunteer "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服从" prop="checkPass">
            <el-select disabled placeholder="" style="width:100%" v-model="basicInfoForm.obey" size="small">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="sub-title">体检信息</h2>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身高" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.highSchoolScore"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体重" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.weight"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="右视力" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.rightVision"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="左视力" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.leftVision"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="体检结论" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.physicalExamConclusion"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="转氨酶" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.transaminase"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="表抗原" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.surfaceAntigen"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="色觉检查" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.colourSense"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收缩压" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.systolicPressure"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="舒张压" prop="checkPass">
              <el-input
                size="small"
                disabled
                type="text"
                v-model="basicInfoForm.diastolicPressure "
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h2 class="titleH">紧急联系人 <el-button size="small" @click="addsos" type="text" style="display:inline-block;">+添加</el-button>
            </h2>
          </el-col>
          <el-col :span="24">
            <el-table :data="basicInfoForm.emergencyContactList">
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column label="姓名">
                <template slot-scope="scope">
                  <el-form-item
                    style="height:54px;margin-bottom:0"
                    :prop="'emergencyContactList[' + scope.$index + '].name'"
                    :rules="{
                      required: true, message: '姓名不能为空', trigger: 'blur'
                    }"
                  >
                   <el-input v-model="scope.row.name" size="small" :maxlength=20 :minlength=1></el-input></el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="关系">
                <template slot-scope="scope">
                     <el-form-item
                     style="height:54px;margin-bottom:0"
                    :prop="'emergencyContactList[' + scope.$index + '].relation'"
                    :rules="{
                      required: true, message: '关系不能为空', trigger: 'blur'
                    }"
                  >
                    <el-input  v-model="scope.row.relation" size="small" :maxlength=8 :minlength=1></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="电话">
                <template slot-scope="scope">
                  <el-form-item
                    style="height:54px;margin-bottom:0"
                    :prop="'emergencyContactList[' + scope.$index + '].phone'"
                    :rules="[{
                      required: true, message: '电话不能为空', trigger: 'blur',
                    },
                     {validator: isPhone, trigger: 'blur'}
                    ]"
                  >
                  <el-input  v-model="scope.row.phone" size="small" :maxlength=11 :minlength=13></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button style=" margin-bottom: 18px" size="small" @click="delsos(scope.row.id, scope.$index)" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24">
            <el-form-item style="text-align:center;margin-top:30px;">
              <el-button @click="resetForm('basicInfoForm')">取消</el-button>
              <el-button type="primary" @click="submitForm('basicInfoForm')">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </section>
</template>
<script>
import defaultHeader from '@/assets/images/default.png'
import manHeader from '@/assets/images/touxiang.png'
import womanHeader from '@/assets/images/womentouxiang.png'
import { common as commonService, student as studentService } from '@api/index'
import {isMobilePhone, isEmailNum, isQQNum, isCardNo} from '@/tools/utils'
export default {
  name: 'studentUpdate',
  data () {
    var isPhone = (rule, value, callback) => {
      if (!value) {
        callback()
      }
      if (!isMobilePhone(value)) {
        callback(new Error('请输入正确手机号码'))
      } else {
        callback()
      }
    }
    var isEmail = (rule, value, callback) => {
      if (!value) {
        callback()
      }
      if (!isEmailNum(value)) {
        callback(new Error('请输入正确邮箱号码'))
      } else {
        callback()
      }
    }
    var isQQ = (rule, value, callback) => {
      if (!value) {
        callback()
      }
      if (!isQQNum(value)) {
        callback(new Error('请输入正确qq号码'))
      } else {
        callback()
      }
    }
    // var isIdNumber = (rule, value, callback) => {
    //   if (this.basicInfoForm.idType.id === 1 && !isCardNo(value)) {
    //     callback(new Error('请输入正确的身份证号码'))
    //   } else if (this.basicInfoForm.idType.id === 1 && new Date(`${value.slice(6, 10)}-${value.slice(10, 12)}-${value.slice(12, 14)}`).getTime() > Date.now()) {
    //     callback(new Error('请输入正确的身份证号码'))
    //   } else if (this.basicInfoForm.idType.id === 1 && isNaN(new Date(`${value.slice(6, 10)}-${value.slice(10, 12)}-${value.slice(12, 14)}`).getTime())) {
    //     callback(new Error('请输入正确的身份证号码'))
    //   } else {
    //     callback()
    //   }
    // }
    // var isHighSchoolScore = (rule, value, callback) => {
    //   if (value < 0 || value > 750) {
    //     callback(new Error('请输入0-750之间的数字'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      formSaveTimer: null,
      isDev: process.env.NODE_ENV === 'development',
      isPhone,
      imageUrl: '',
      // 学院
      collegeOptions: [],
      majorOptions: [],
      // 年级
      gradeOptions: [],
      // 班级
      clazzOptions: [],
      nationOptions: [],
      // 生源地省份
      nativePlaceOptions: [],
      // 政治面貌
      politicsStatusOptions: [],
      // 户口类型
      nodetypeOptions: [
        {
          id: 1,
          name: '农业'
        },
        {
          id: 0,
          name: '非农业'
        }
      ],
      idTypeOptions: [],
      // 学生状态
      studentStatusOptions: [],
      // 校区
      campusNameOptions: [],
      basicInfoForm: {
        uploadPicUrl: null, // 记录上传返回的文件名
        sn: null,
        emergencyContactList: [],
        majors: {name: null, id: null},
        colleges: {name: null, id: null},
        classes: {name: null, id: null},
        idType: {name: null, id: null},
        status: {name: null, id: null},
        campus: {name: null, id: null},
        politicalStatus: {name: null, id: null},
        gender: {name: null, id: null},
        nodeType: {name: null, id: null},
        position: ''
      },
      nodeTypetest: {name: null, id: null},
      isaaa: false,
      basicInfoFormRules: {
        bankCard: [
          // {required: true, message: '请按照系统要求填写正确的银行账号', trigger: 'blur'},
          { max: 19, message: '银行账户不能大于19位', trigger: 'blur' },
          {required: true, message: '请填写银行账户', trigger: 'change'}
        ],
        position: [
          // {required: true, message: '请填写职务', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请按照系统要求填写正确的手机号', trigger: 'blur'},
          {validator: isPhone, trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请填写邮箱', trigger: 'blur'},
          {validator: isEmail, trigger: 'blur'}
        ],
        qq: [
          {required: true, message: '请填写QQ号', trigger: 'blur'},
          {validator: isQQ, trigger: 'blur'}
        ],
        healthStatus: [
          {required: true, message: '请选择个人健康状况', trigger: 'blur'}
        ]
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  props: ['studentBasicInfo'],
  computed: {
    // 根据性别换头像
    studentHeader: function () {
      if (this.basicInfoForm.picUrl) {
        // let rootUrl = window.location.href.indexOf('localhost') > -1 ? '172.16.170.119' : window.location.href.split('/')[2]
        // rootUrl = '172.16.170.119'
        // let url = `http://${rootUrl}/${this.basicInfoForm.picUrl}`
        return `/fastdfs-util/api/fastdfs/download/image?filePath=${this.basicInfoForm.picUrl}`
      } else if (this.basicInfoForm.gender.name === '未知' || this.basicInfoForm.gender.id === -1) {
        return defaultHeader
      } else if (this.basicInfoForm.gender.name === '男' || this.basicInfoForm.gender.id === 1) {
        return manHeader
      } else if (this.basicInfoForm.gender.name === '女' || this.basicInfoForm.gender.id === 0) {
        return womanHeader
      }
    },
    politicalStatus () {
      return this.basicInfoForm.politicalStatus
    }
  },
  mounted () {
    this.basicInfoForm = Object.assign({}, this.studentBasicInfo)
    // getFormDataLocal('updateSelfInfo', 'sn', this.basicInfoForm, ['name', 'gender', 'colleges', 'grade', 'majors', 'classes', 'studentLength', 'enterDate'])
    this.nativePlaceSelect()
    this.politicsStatusSelect()
    this.nationSelect()
    this.getcardTypeList()
    this.getStudentCampus()
    this.getStudentStatus()
    // this.formSaveTimer = setInterval(() => {
    //   // this.$alert('表单信息已保存至本地，下次进入将自动加载', '提示', {
    //   //   confirmButtonText: '确定'})
    //   saveFormDataLocal('updateSelfInfo', this.basicInfoForm)
    // }, 1000 * 60 * 3)
  },
  destroyed () {
    clearInterval(this.formSaveTimer)
  },
  methods: {
    idTypeChange () {
      this.$refs.basicInfoForm.validateField('idNumber')
      this.idNumChange(this.basicInfoForm.idNumber)
    },
    idNumChange (value) {
      if (isCardNo(value) && this.basicInfoForm.idType.id === 1 && new Date(`${value.slice(6, 10)}-${value.slice(10, 12)}-${value.slice(12, 14)}`).getTime() < Date.now()) {
        this.basicInfoForm.birthDate = new Date(`${value.slice(6, 10)}-${value.slice(10, 12)}-${value.slice(12, 14)}`)
      }
    },
    // 添加紧急联系人
    addsos () {
      let len = this.basicInfoForm.emergencyContactList.length
      if (len > 5) {
        this.$message.error('紧急联系人数量超过上限')
      } else {
        this.basicInfoForm.emergencyContactList.push({
          name: '',
          relation: '',
          phone: ''
        })
      }
    },
    // 删除紧急联系人
    delsos (id, index) {
      this.$confirm('是否确认删除此紧急联系人？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (id) {
          studentService()._delsos(id)
            .then(res => {
              if (res.status) {
                this.$message.success('删除成功')
                this.basicInfoForm.emergencyContactList.splice(index, 1)
              }
            })
        } else {
          this.basicInfoForm.emergencyContactList.splice(index, 1)
        }
      })
    },
    // 选择民族
    nationSelect () {
      commonService()._findAllNation().then(res => {
        this.nationOptions = []
        if (res.status) {
          res.data.forEach(item => {
            let params = {
              id: item.id,
              name: item.name
            }
            this.nationOptions.push(params)
          })
        }
      })
    },
    // 校区
    getStudentCampus () {
      this.campusNameOptions = []
      commonService()._getStudentCampus().then(res => {
        this.campusNameOptions = []
        if (res.status && res.data) {
          this.campusNameOptions.push(...res.data)
        }
      })
    },
    // 身份证件类型
    getcardTypeList () {
      this.idTypeOptions = []
      commonService()._getcardTypeList().then(res => {
        this.idTypeOptions = []
        if (res.status && res.data) {
          this.idTypeOptions.push(...res.data)
        }
      })
    },
    // 选择生源地省份
    nativePlaceSelect () {
      commonService()._findAllProvince().then(res => {
        this.nativePlaceOptions = []
        if (res.status) {
          res.data.forEach(item => {
            let params = {
              id: item.id,
              name: item.name
            }
            this.nativePlaceOptions.push(params)
          })
        }
      })
    },
    // 学生状态
    getStudentStatus () {
      this.studentStatusOptions = []
      commonService()._getStudentStatus().then(res => {
        this.studentStatusOptions = []
        if (res.status && res.data) {
          this.studentStatusOptions.push(...res.data)
        }
      })
    },
    // 政治面貌
    politicsStatusSelect () {
      commonService()._getAllPoliticsStatus().then(res => {
        this.politicsStatusOptions = []
        if (res.status) {
          res.data.forEach(item => {
            let params = {
              id: item.id,
              name: item.name
            }
            this.politicsStatusOptions.push(params)
          })
        }
      })
    },
    getParams () {
      return {
        'sn': this.basicInfoForm.sn,
        'picUrl': this.basicInfoForm.uploadPicUrl,

        // 'nationId': this.basicInfoForm.nationId,
        // 'nativePlaceId': this.basicInfoForm.nativePlaceId,

        // 'politicalStatus': this.basicInfoForm.politicalStatus.id,
        // 'nodeType': this.basicInfoForm.nodeType.id,
        // 'idType': this.basicInfoForm.idType.id,

        // 'idNumber': this.basicInfoForm.idNumber,
        // 'status': this.basicInfoForm.status.id,
        // 'sourcePlace': this.basicInfoForm.sourcePlace,

        'bankCard': this.basicInfoForm.bankCard,
        'position': this.basicInfoForm.position,
        'campusId': this.basicInfoForm.campus.id,

        'dorm': this.basicInfoForm.dorm,
        'phone': this.basicInfoForm.phone,
        'email': this.basicInfoForm.email,

        'qq': this.basicInfoForm.qq,
        'birthDate': this.basicInfoForm.birthDate,
        'healthStatus': this.basicInfoForm.healthStatus,

        // 'highSchoolScore': this.basicInfoForm.highSchoolScore,
        // 'studentLength': this.basicInfoForm.studentLength,
        // 'enterDate': this.basicInfoForm.enterDate,

        'emergencyContactList': this.basicInfoForm.emergencyContactList
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid, err) => {
        if (valid) {
          if (this.basicInfoForm.emergencyContactList.length === 0) {
            this.$message('请至少填写一名紧急联系人！')
            return
          }
          let params = this.getParams()
          studentService()._studenUpdateInfo(params).then(res => {
            if (res.status) {
              this.$message.success('修改成功！')
              this.$emit('cancleUpdate')
            }
          })
        } else {
          this.$confirm(`当前还有数据为空，或者存在格式错误：${err[Object.keys(err)[0]][0].message}`, '个人信息', {
            cancelButtonText: '返回',
            showConfirmButton: false,
            type: 'warning'
          }).then(() => {

          }).catch(() => {

          })
          return false
        }
      })
    },
    resetForm (formName) {
      // clearFormDataLocal('updateSelfInfo')
      this.$refs[formName].resetFields()
      this.$emit('cancleUpdate')
    },
    beforeAvatarUpload (file) {
      if ((file.type).indexOf('image/') === -1) {
        this.$message('请上传图片!')
      } else if (file.size / 1024 / 1024 > 5) {
        this.$message('请上传小于5M图片!')
      }
    },
    handleAvatarSuccess (response, file) {
      if (response.code === 50000) {
        if (response.otherData && response.otherData.detail) {
          this.$message(response.otherData.detail)
          return
        }
        this.$message(response.message)

        return
      }
      this.basicInfoForm.picUrl = response.filePath // URL.createObjectURL(file.raw)
      this.basicInfoForm.uploadPicUrl = response.filePath
    }
  }
}
</script>
<style lang="less">
.update-self-info{
   .el-form-item__label{
    line-height: 30px;
  }

}

</style>
<style lang="less" scoped>
.sub-title{
  font-size: 15px;
  margin-top: 8px;
}
/deep/.el-input.is-disabled .el-input__inner {
  background-color: #e1e1e1;
}
.el-select {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  .headerBG {
    width: 120px;
    height: 150px;
    text-align: center;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 100px;
  display: block;
}
.titleH{
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}

</style>
